<template>
    <div class="dspDetail">
        <div class="outer_top">

            <div class="inner_top">

                <div class="title_and_heyue">
                    <div class="title">
                        {{data.title}}
                    </div>

                    <div class="heyue">
                        智能合约
                    </div>

                </div>

                <div class="top_content">
                    <div class="top_content_left">
                        <div class="duibiao_zhanghao">对标账号：{{data.accountNumber}}</div>
                        <div class="mailed">已投稿件：{{data.submitWritingCounts}}件</div>
                        <div class="mail_type">稿件类型：{{parseType(data.worksCallupCreationType)}}</div>

                        <div class="money" v-if="(data.earnestMoney == 0) || (data.earnestMoney == null)">单稿赏金：0</div>
                        <div class="money" v-else>单稿赏金：{{data.earnestMoney}}</div>

                    </div>
                    <div class="top_content_right">
                        <div class="zuozheid">征稿方数字身份：</div>
                        <div class="hash">{{data.publisherIdentity}}</div>
<!--                        <div class="jiezhi_riqi">截止时间：{{jiezhi(data.callupState)}}</div>-->
                    </div>
                </div>

            </div>

        </div>

        <div class="pay_panel">
            <div class="pay_panel_top">
                <div class="zhifu_and_price">
                    <div class="zhifu">已支付赏金：</div>
                    <div class="price" v-if="(data.earnestMoney == 0) || (data.earnestMoney == null)">免费</div>
                    <div class="price" v-else>￥{{data.earnestMoney}}</div>
                </div>
                <div class="pay_button">
                    {{jiezhi(data.callupState)}}
                </div>

                <div class="rules">
                    规则：
                </div>

                <div class="jiezhi_shijian">
                    截止时间：{{jiezhi(data.callupState)}}
                </div>

                <div class="zhenggao_guize">
                    征稿规则
                </div>

            </div>
            <div class="pay_panel_bottom" @click.stop="$router.back()">
                返回短视频剧本
            </div>
        </div>

        <div class="outer_bottom">

            <div class="inner_bottom">
                <!--                <div class="shipin_xiangqing">视频详情</div>-->
                <!--                <div class="paishe_huanjing">拍摄环境：</div>-->
                <!--                <div class="paishe_huanjing_content">-->
                <!--                    家中餐桌前-->
                <!--                </div>-->

                <!--                <div class="canyan_juese">-->
                <!--                    参演角色：-->
                <!--                </div>-->

                <!--                <div class="canyan_juese_content">-->
                <!--                    男主、女主（夫妻或情侣关系）-->
                <!--                </div>-->

                <!--                <div class="juben_gaikuang">-->
                <!--                    剧本概况：-->
                <!--                </div>-->

                <!--                <div class="juben_gaikuang_content">-->
                <!--                    二人吃饭，朋友突然来电话让丈夫出去参加酒局，丈夫花式应付，想要逃避，妻子更是全力在一旁辅助配合。只是 当朋友道出请客的缘由时，-->
                <!--                </div>-->

                <div class="inner_bottom_content" :innerHTML="data.detailContent">

                </div>


                <div class="alert_message">
                    官方提示：请双方评估交易风险，慎重进行平台以外的交易！
                </div>

<!--                <div class="all_ready_donet_title">-->
<!--                    已投稿短视频列表-->
<!--                </div>-->

<!--                <div class="list_outer">-->
<!--                    <div class="list_head">-->
<!--                        <div>交易ID</div>-->
<!--                        <div>作品名称</div>-->
<!--                        <div>作品代码</div>-->
<!--                        <div>作者</div>-->
<!--                        <div>作者数字身份</div>-->
<!--                        <div>投稿时间</div>-->
<!--                        <div></div>-->
<!--                    </div>-->


<!--                    <div class="list_item" v-for="item in filterSubmitWriting()" :key="item.id">-->
<!--                        <div>{{item.scriptWritingId}}</div>-->
<!--                        <div>{{item.worksId}}</div>-->
<!--                        <div>{{item.worksId}}</div>-->
<!--                        <div>{{item.publisherId}}</div>-->
<!--                        <div>{{item.publisherIdentity}}</div>-->
<!--                        <div>{{item.createTime}}</div>-->
<!--                        <div>-->
<!--                            <div class="item_zhineng_heyue">-->
<!--                                智能合约-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->



<!--                </div>-->

<!--                <div class="load_more" v-if="(submitWriting.length>=3) && showMore" @click.stop="addSubmitWriting">-->
<!--                    查看更多-->
<!--                </div>-->

                <div class="block">

                </div>

            </div>


        </div>

    </div>
</template>

<script>
    import {WorksCallupDetail} from "../../../api/dsp/WorksCallupList";
    export default {

        name: "dsp_zj_detail",
        data() {
            return {
                data: {},
                // submitWriting:[],
                submitWritingChooseLength:3,
                showMore:true,
                submitWriting:[],
            }
        },
        mounted() {

            console.log('id 是', this.$route.query.id)
            WorksCallupDetail({id: this.$route.query.id}).then(res => {
                this.data = res.data[0]
                this.submitWriting = res.data[0].submitWriting
                console.log(this.data)
            })

            window.scrollTo(0,0)
        },
        methods: {
            parseType(list) {

                if (list == undefined) {
                    return ' '
                } else {
                    let typeString = ''

                    list.forEach(item => {
                        typeString += item.creationTypeName + ' '
                    })

                    return typeString
                }

            },

            jiezhi(data) {
                switch (data) {
                    case 1:
                        return '征稿中'
                        break;
                    case 2:
                        return '选稿中'
                        break;
                    case 3:
                        return '已完成征稿'
                        break;
                    default:
                        return ' '
                }
            },
            filterSubmitWriting(){
                let length=this.submitWriting.length
                console.log(this.submitWritingChooseLength)
                let res=this.submitWriting.slice(0,this.submitWritingChooseLength)
                console.log('数据长度为',this.submitWriting.length)
                console.log('res的长度为',res.length)
                if(res.length == this.submitWriting.length){
                    this.showMore = false
                }
                return res
            },
            addSubmitWriting(){
                if(this.showMore){
                    this.submitWritingChooseLength+=3
                    this.filterSubmitWriting()
                }
            }
        },

    }
</script>

<style scoped>
    .dspDetail {
        width: 100%;
        position: relative;
    }

    .outer_top {
        width: 100%;
        overflow: hidden;
        height: 240px;
        background: #2EB0C6;
    }

    .inner_top {
        width: 1001px;
        height: 240px;
        margin: 0px auto;
    }

    .title_and_heyue {
        width: 336px;
        display: flex;
        justify-content: space-between;
    }

    .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin-top: 45px;
    }

    .heyue {
        width: 82px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #FFFFFF;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        margin-top: 42px;
    }

    .top_content {
        width: 438px;
        margin-top: 29px;
        display: flex;
        justify-content: space-between;
    }

    .top_content_left div {
        width: 211px;

        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        margin-bottom: 21px;
    }

    .top_content_right {
        margin-top: -3px;
        position: relative;
    }

    .top_content_right div {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    .hash {
        margin-top: 10px;
        width: 204px;
        height: 39px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: underline;
        color: #FFFFFF;
    }

    .jiezhi_riqi {
        position: absolute;
        bottom: 32px;
    }

    .pay_panel {
        width: 309px;
        height: 387px;
        background: #f5f5f5;
        position: absolute;
        top: 73px;
        right: 459px;
        border-radius: 4px;
    }

    .pay_panel_top {
        width: 100%;
        height: 316px;
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        overflow: hidden;
    }

    .zhifu_and_price {
        display: flex;
        justify-content: space-between;
        margin-top: 45px;

    }

    .zhifu {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4C4C4C;
        margin-left: 29px;
    }

    .price {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
        margin-right: 55px;
        margin-top: -4px;
    }

    .pay_button {
        width: 243px;
        height: 46px;
        background: #2EB0C6;
        border-radius: 4px;
        margin: 0px auto;
        margin-top: 31px;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
    }

    .rules {
        width: 243px;
        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4C4C4C;
        margin: 0px auto;
        margin-top: 29px;

        /*文字溢出省略号*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jiezhi_shijian {
        width: 243px;
        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        margin: 0px auto;
        margin-top: 18px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zhenggao_guize {
        width: 243px;
        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        margin: 0px auto;
        margin-top: 12px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pay_panel_bottom {
        position: absolute;
        bottom: 0px;

        width: 309px;
        height: 48px;
        background: #FFFFFF;
        border: 1px solid #2EB0C6;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2EB0C6;
        line-height: 48px;
        text-align: center;
        margin-left: -1px;
        cursor: pointer;
    }

    .outer_bottom {
        width: 100%;
        background: #FFFFFF;
        overflow: hidden;
    }

    .inner_bottom {
        width: 1001px;
        margin: 0px auto;
        overflow: hidden;
    }

    .inner_bottom_content {
        width: 683px;
        min-height: 300px;
        margin-top: 40px;
        font-size: 16px;
    }

    .shipin_xiangqing {
        margin-top: 40px;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }

    .paishe_huanjing {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;
        margin-top: 24px;
    }

    .paishe_huanjing_content {
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        max-height: 40px;
        width: 600px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .canyan_juese {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;

        margin-top: 36px;
    }

    .canyan_juese_content {
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        max-height: 40px;
        width: 600px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .juben_gaikuang {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;

        margin-top: 36px;
    }

    .juben_gaikuang_content {
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        max-height: 100px;
        width: 600px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        margin-bottom: 204px;
    }

    .alert_message {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF4444;
        line-height: 12px;
        margin-top: 20px;
    }

    .all_ready_donet_title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
        margin-top: 62px;
    }

    .list_outer {
        width: 100%;
        margin-top: 19px;
    }

    .list_head {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #F5F6F6;
    }

    .list_head > div {
        width: 143px;
        height: 50px;
        line-height: 50px;

        text-align: center;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .list_item {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .list_item > div {
        width: 143px;
        height: 60px;
        line-height: 60px;

        text-align: center;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;

        /*文字溢出省略号*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list_item > div:nth-child(odd) {
        color: #2EB0C6;
    }

    .list_item > div:nth-child(even) {
        color: #666666;
    }

    .list_item > div:last-child {
        display: flex;
        align-items: center;
    }

    .item_zhineng_heyue {
        width: 90px;
        height: 30px;
        background: #2EB0C6;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        margin: 0px auto;
        cursor: pointer;
    }

    .load_more {
        width: 112px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4C4C4C;
        line-height: 36px;
        text-align: center;
        cursor: pointer;

        margin: 0px auto;
        margin-top: 40px;
    }
    .block{
      width: 100%;
      height: 105px;
    }

</style>
